<template>
  <div class="trace-container">
    <div class="search-section">
      <h2>产品溯源查询</h2>
      <div class="search-box">
        <el-input 
          v-model="code" 
          placeholder="请输入产品溯源码" 
          class="search-input"
          @keyup.enter.native="search"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-button 
          type="primary" 
          @click="search" 
          class="search-btn"
          :loading="loading"
        >{{ loading ? '查询中...' : '查询溯源' }}</el-button>
      </div>
    </div>

    <div class="result-section" v-if="traceData.name">
      <el-card class="product-card">
        <template #header>
          <div class="card-header">
            <span>产品信息</span>
          </div>
        </template>
        <div class="product-info">
          <div class="info-item">
            <span class="label">产品名称：</span>
            <span class="value">{{traceData.name}}</span>
          </div>
          <div class="info-item">
            <span class="label">产地：</span>
            <span class="value">{{traceData.origin}}</span>
          </div>
          <div class="info-item">
            <span class="label">生产厂家：</span>
            <span class="value">{{traceData.manufacturer}}</span>
          </div>
          <div class="info-item">
            <span class="label">上架日期：</span>
            <span class="value">{{traceData.listDate}}</span>
          </div>
          <div class="info-item">
            <span class="label">产品价格：</span>
            <span class="value price">¥{{traceData.price}}</span>
          </div>
        </div>
      </el-card>
    </div>
    
    <div v-if="!traceData.name && hasSearched && !loading" class="empty-result">
      <el-empty description="未找到产品信息，请检查溯源码是否正确"></el-empty>
    </div>
  </div>
</template>

<script>

export default {
  name: "Trace",
  data() {
    return {
      code: '',
      loading: false,
      hasSearched: false,
      traceData:{
        name:'',
        origin:'',
        manufacturer:'',
        listDate:'',
        price:'',
      }
    }
  },
  methods: {
    // 根据溯源码直接获取产品详情
    async getProductByTraceCode(traceCode) {
      try {
        console.log(`查询溯源码: ${traceCode}`);
        // 先调用TraceCodeController的接口获取产品信息
        const res = await this.request.get(`/trace-code/product/${traceCode}`);
        console.log('查询结果:', res);
        
        if (res.code === '200') {
          return res.data;
        } else {
          console.warn(`根据溯源码查询产品失败: ${res.msg}`);
          return null;
        }
      } catch (error) {
        console.error('查询产品信息失败:', error);
        return null;
      }
    },
    
    async search() {
      if(this.code=='') {
        this.$message.warning('请输入溯源码');
        return;
      }
      
      this.loading = true;
      this.hasSearched = true;
      
      try {
        // 重置数据
        this.traceData = {
          name:'',
          origin:'',
          manufacturer:'',
          listDate:'',
          price:'',
        };
        
        // 直接通过溯源码获取产品详情
        const productData = await this.getProductByTraceCode(this.code);
        
        if (productData) {
          // 产品存在，显示数据
          this.traceData.name = productData.productName || productData.name || '';
          this.traceData.origin = productData.origin || '';
          this.traceData.manufacturer = productData.manufacturer || '';
          this.traceData.price = productData.price || '';
          this.traceData.listDate = productData.harvestTime || productData.listDate || '';
          this.$message.success('查询成功');
        } else {
          // 产品不存在
          this.$message.error('未找到产品信息，请检查溯源码是否正确');
        }
      } catch (error) {
        console.error('查询产品信息失败:', error);
        this.$message.error('查询失败，请稍后再试');
      } finally {
        this.loading = false;
      }
    }
  }
}
</script>

<style scoped>
.trace-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.search-section {
  text-align: center;
  margin-bottom: 30px;
}

.search-section h2 {
  color: #303133;
  margin-bottom: 20px;
}

.search-box {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.search-input {
  width: 400px;
}

.search-btn {
  padding: 12px 30px;
}

.result-section {
  margin-top: 30px;
}

.product-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.card-header {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.product-info {
  padding: 20px;
}

.info-item {
  display: flex;
  margin-bottom: 15px;
  line-height: 24px;
}

.label {
  width: 100px;
  color: #606266;
  font-weight: 500;
}

.value {
  color: #303133;
  flex: 1;
}

.price {
  color: #f56c6c;
  font-weight: bold;
  font-size: 18px;
}

.empty-result {
  margin-top: 50px;
  text-align: center;
}
</style>
